<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>学生成绩分析-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/echarts-3.8.4.js"></script>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title">${student.name }学生成绩分析</h1>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
          		<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span id="newestExam"></span> 考试成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currExam" style="width: 100%;height:320px;"></div>
	          	</div>
	          	<div class="weui_cell bd-t0" style="margin-top: -80px;" id="examScoreList">
	          	</div>
	        </div>
	        
	        <div class="weui_cells afterNone afterNoneBefore mt0">
	          	<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="schoolYear"></span> 综合成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currTermExam" style="width: 100%;height:320px;"></div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell bd-t0" id="prizeList">
	          		<div class="weui_cell_hd">
						<img src="<%=basePath %>/images/huojiangdengji@3x.png" style="width:18px;margin-right:5px;display:block">
					</div>
					<div class="weui_cell_hd">
						<p class="pr15"><span class="schoolYear"></span> 获奖荣誉</p>
					</div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell bd-t0" id="schoolPrizeList">
	          		<div class="weui_cell_hd">
						<img src="<%=basePath %>/images/huojiangdengji@3x.png" style="width:18px;margin-right:5px;display:block">
					</div>
					<div class="weui_cell_hd">
						<p class="pr15"><span class="schoolYear"></span> 校内奖项</p>
					</div>
	          	</div>
      		</div>
		</div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		currExam();
	})
	function currExam() {
		$.ajax({
    		url: basePath + "/student/groupup/studentScore/query",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			examId: "${examId}"
    		},
    		success: function(resp) {
    			if(resp.length == 0) return;
    			$("#newestExam").html(resp[0].termName + resp[0].examName);
    			$("#examScoreList").html('\
	    			<div class="weui_cell_hd weui_center_25" style="width:15%;">\
			  		</div>\
			  		<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_chiness_border">\
			  				<span class="f15">语文</span><br/>\
			  				<span class="score_chiness_color">'+scoreToGrade(resp[0].gradeId, resp[0].chineseScore, resp[0].fullScore, 0)+'</span>\
			  			</p>\
					</div>\
			  		<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_english_border">\
			  				<span class="f15">英语</span><br/>\
			  				<span class="score_english_color">'+scoreToGrade(resp[0].gradeId, resp[0].englishScore, resp[0].fullScore, 2)+'</span>\
			  			</p>\
					</div>\
					<div class="weui_cell_hd weui_center_25">\
						<p class="score_circle score_math_border">\
			  				<span class="f15">数学</span><br/>\
			  				<span class="score_math_color">'+scoreToGrade(resp[0].gradeId, resp[0].mathScore, resp[0].fullScore, 1)+'</span>\
			  			</p>\
					</div>');
    			//平均分
    			var examAvgScore = '<div class="weui_cell bd-t0">';
	          	examAvgScore += '</div>';
	          	$("#examScoreList").after(examAvgScore);
	          	currExamReport(resp[0]);
	          	termExam(resp[0].termName);
	          	prizeList(resp[0].termName);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function termExam(termName) {
		$(".schoolYear").html(termName.substr(0,termName.lastIndexOf("学期")-1));
		var termYear = termName.substr(0,4);
		$.ajax({
    		url: basePath + "/student/groupup/studentScore/query",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			termYear: termYear
    		},
    		success: function(rspData) {
    			if(rspData.length == 0) return;
    			currTermExamReport(rspData);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function prizeList(termName) {
		var termYear = termName.substr(0,4);
		$.ajax({
    		url: basePath + "/student/groupup/prizeList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			studentId: "${student.id}",
    			termYear: termYear
    		},
    		success: function(respData) {
    			if(respData != null) {
    				var prizeList = '', schoolPrizeList = '';
    				for(var i in respData.fruits) {
    					prizeList += '<div class="weui_cell bd-t0" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
   	    	          		<div class="weui_cell_hd f15 f-gray4e weui_75">'+respData.fruits[i].competitionName+'</div>\
   	    	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25">'+respData.fruits[i].awardLevel + " " + respData.fruits[i].awardGrade+'</div>\
   	    	          	</div>';
    				}
    				$("#prizeList").after(prizeList);
    				for(var i in respData.prizes) {
    					schoolPrizeList += '<div class="weui_cell bd-t0" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
   	    	          		<div class="weui_cell_hd f15 f-gray4e">'+respData.prizes[i].prizeName+'</div>\
   	    	          	</div>';
    				}
    				$("#schoolPrizeList").after(schoolPrizeList);
    			}
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExamReport(data) {
		var gradeId = data.gradeId;
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currExam'));
		option = {
		    tooltip: {
		    	formatter:function(a) {
		        	var relVal = a.seriesName + "</br>";
		        	relVal += "语文: " + scoreToGrade(gradeId, a.value[0], data.fullScore, 0) + "</br>";
		        	relVal += "数学: " + scoreToGrade(gradeId, a.value[1], data.fullScore, 1) + "</br>";
		        	relVal += "英语: " + scoreToGrade(gradeId, a.value[2], data.fullScore, 2);
		        	return relVal;
		        }
		    },
		    radar: {
		        name: {
		            textStyle: {
		                color: '#fff',
		                backgroundColor: '#999',
		                borderRadius: 3,
		                padding: [3, 5]
		           }
		        },
		        indicator: [
		           { name: '语文', max: parseInt(data.fullScore.split(",")[0])},
		           { name: '数学', max: parseInt(data.fullScore.split(",")[1])},
		           { name: '英语', max: parseInt(data.fullScore.split(",")[2])}
		        ],
	            radius: 120
		    },
		    series: [{
		    	name: "分数",
		        type: 'radar',
		        radarIndex: 0,
		        symbolSize: 10,
		        data : [{
		        	value: (function () {
			        	return [data.chineseScore, data.mathScore, data.englishScore];
			        })()
		        }]
		    }]
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	
	function currTermExamReport(list) {
		var gradeId = list[0].gradeId;
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis',
		        formatter:function(a) {
		        	var relVal = a[0].axisValue + "</br>";
		        	for(var i = 0; i < a.length; i++) {
		        		var score;
		        		if(a[i].seriesName == '语文') {
		        			score = scoreToGrade(gradeId, a[i].value, list[0].fullScore, 0);
		        		}else if(a[i].seriesName == '数学') {
		        			score = scoreToGrade(gradeId, a[i].value, list[0].fullScore, 1);
		        		}else if(a[i].seriesName == '英语') {
		        			score = scoreToGrade(gradeId, a[i].value, list[0].fullScore, 2);
		        		}
		        		
		        		relVal += a[i].seriesName + ": " + score;
		        		if(i < a.length - 1) {
		        			relVal += "</br>";
		        		}
		        	}
			        return relVal;
		        }
		    },
		    legend: {
		        data:["语文", "数学", "英语"]
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		    	name: "考试",
		        type: 'category',
		        boundaryGap: false,
		        data: (function() {
		        	var array = [];
		        	for(var i = list.length - 1; i >= 0; i--) {
		        		array.push(
	        				list[i].examName+"("+
	        				list[i].termName.substring(list[i].termName.lastIndexOf("学年")+2,
	        				list[i].termName.lastIndexOf("学年")+3)+")"
    					);
		        	}
		        	return array;
		        }())
		    },
		    yAxis: {
		        type: 'value',
		        name: "分数"
		    },
		    series: (function() {
		    	var array = [], chineseList = [], mathList = [], englishList = [];
		    	for(var i = list.length - 1; i >= 0; i--) {
		    		chineseList.push(list[i].chineseScore);
		    		mathList.push(list[i].mathScore);
		    		englishList.push(list[i].englishScore);
		    	}
		    	array.push({
		        	name: "语文",
		            type:'line',
		            symbolSize: 10,
		            data: chineseList
		    	});
		    	array.push({
		        	name: "数学",
		            type:'line',
		            symbolSize: 10,
		            data: mathList
		    	});
			    	array.push({
		        	name: "英语",
		            type:'line',
		            symbolSize: 10,
		            data: englishList
		    	});
			    return array;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
</script>
</html>